import React, {Component} from 'react';

require('wangEditor');


class TextEditor extends Component {
    render() {
        const style = {
            width: '100%',
            height: '300px'
        }

        return (<div id={this.props.id} style={style} contentEditable="true"></div>);
    }

    componentDidMount() {
        const id = this.props.id;
        this.editor = new window.wangEditor(id);
        this.editor.config.uploadImgUrl = '/upload';

        this.editor.config.menus = ['fontsize', 'forecolor', 'bgcolor', 'bold', 'italic', 'underline', 'strikethrough', '|', 'orderlist', 'unorderlist', 'alignleft', 'aligncenter', 'alignright', '|', 'link', 'unlink', 'table'];

        this.editor.create();

        // 初始化内容
        this.editor.$txt.html(this.props.content);
    }

    getContent() {
        return this.editor.$txt.html();
    }

}

export default TextEditor;